<template>
  <div class="page bg-current">
    <el-container>
      <el-header><Header :title="title"></Header></el-header>
      <el-container>
        <el-aside width="170px">
          <div v-if="!loadMenuFailed" v-loading="!loadingMenuStatus" style="width: 170px; height: 100%">
            <Menu v-if="loadingMenuStatus" :menuData="menuData" default="/images"></Menu>
          </div>
          <el-empty v-else description="加载菜单失败" style="width: 170px; height: 100%;border: 1px solid;" />
        </el-aside>
        <el-main>
          <div id="content-box">
            <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
              </keep-alive>
              <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
            </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import Header from "@/layout/Header.vue"
import { ref, onMounted } from "vue"
import Menu from "@/components/data-manager/Menu.vue"
import { dataMenuApi } from "@/api/data-manager/menuApi"
import { ElMessage } from "element-plus"

const title = ref<string>("数据管理系统")

const menuData: any = ref()
const loadingMenuStatus = ref<boolean>(false)
const loadMenuFailed = ref<boolean>(false)

onMounted(() => {
  setTimeout(async () => {
    let res
    try {
      res = await dataMenuApi()
    } catch (error) {
      console.error(error)
      ElMessage.error("加载菜单失败，请稍后再试")
      loadingMenuStatus.value = true
      loadMenuFailed.value = true
      return
    }
    menuData.value = res.data
    loadingMenuStatus.value = true
  })
})
</script>

<style lang="scss" scoped>
:deep(.el-header) {
  padding: 0;
  height: 50px;
}

:deep(.el-main) {
  overflow: hidden;
}
.page {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: var(--color-gray-300);
}

#content-box {
  // position: absolute;
  height: 90vh;
  width: 100%;
  padding-bottom: 30px;
}
</style>
